  <div class="warning register-warning" style="display: none">${i18n('error_validation')}</div>

  <form action="index.php/account/register" method="post" enctype="multipart/form-data" id="register${_shipment}">
    <input type="submit" style="display: none;">
    <input type="hidden" name="_url" value="${_url}"/>
    {{if typeof _action == 'undefined'}}
    <input type="hidden" name="_shipment" value="${_shipment}"/>
    {{if !_shipment}}
    <h2>${i18n('text_your_details')}</h2>
    {{else}}
    <h2>${i18n('text_new_customer')}</h2>
    {{/if}}
    <div class="content">
      <table class="form">
        <tr>
          <td><span class="required">*</span> ${i18n('entry_firstname')}</td>
          <td><input type="text" name="firstname"/></td>
        </tr>
        <tr>
          <td><span class="required">*</span> ${i18n('entry_lastname')}</td>
          <td><input type="text" name="lastname"/></td>
        </tr>
        <tr>
          <td><span class="required">*</span> ${i18n('entry_email')}</td>
          <td><input type="text" name="email"/></td>
        </tr>
        {{if _shipment != 'download'}}
        <tr>
          <td><span class="required">*</span> ${i18n('entry_telephone')}</td>
          <td><input type="text" name="telephone"/></td>
        </tr>
        <tr>
          <td>${i18n('entry_fax')}</td>
          <td><input type="text" name="fax"/></td>
        </tr>
        {{/if}}
      </table>
    </div>
    {{else}}
    <input type="hidden" name="_action" value="update"/>
    {{/if}}
    {{if _shipment != 'download'}}
    {{if typeof _action == 'undefined'}}
    <h2>${i18n('text_your_address')} </h2>
    {{else}}
    <br/>
    {{/if}}
    {{if app.connected()}}<input type="hidden" name="address_id" value="${app.connected().addressId}"/>{{/if}}
    <div class="content">
      <table class="form">
        {{if address}}
        <tr>
          <td><span class="required">*</span> ${i18n('entry_firstname')}</td>
          <td><input type="text" name="firstname" {{if address}}value="${address.firstname}"{{/if}}/></td>
        </tr>
        <tr>
          <td><span class="required">*</span> ${i18n('entry_lastname')}</td>
          <td><input type="text" name="lastname" {{if address}}value="${address.lastname}"{{/if}}/></td>
        </tr>
        {{/if}}
        <tr>
          <td>${i18n('entry_company')}</td>
          <td><input type="text" name="company"/></td>
        </tr>
        <tr>
          <td><span class="required">*</span> ${i18n('entry_address_1')}</td>
          <td><input type="text" name="address_1" {{if address}}value="${address.address_1}"{{/if}}/></td>
        </tr>
        <tr>
          <td>${i18n('entry_address_2')}</td>
          <td><input type="text" name="address_2" {{if address}}value="${address.address_2}"{{/if}}/></td>
        </tr>
          <tr>
            <td><span class="required">*</span> ${i18n('entry_city')}</td>
            <td><input id="city" type="text" name="city" {{if address}}value="${address.city}"{{/if}}/></td>
          </tr>
          <tr>
            <td><span class="required">*</span> ${i18n('entry_postcode')}</td>
            <td><input type="text" name="postcode" {{if address}}value="${address.postcode}"{{/if}}/></td>
          </tr>
          <tr>
            <td><span class="required">*</span> ${i18n('entry_country')}</td>
            <td><input id="country" type="text" name="country" {{if address}}value="${address.country}"{{/if}}/>
              <input id="country_code" type="hidden" name="country_code" {{if address}}value="${address.country_code}"{{/if}}/></td>
          </tr>
          <tr>
            <td><span class="required">*</span> ${i18n('entry_zone')}</td>
            <td><input id="zone" type="text" name="zone" {{if address}}value="${address.zone}"{{/if}}/></td>
          </tr>
      </table>
    </div>
    {{/if}}
    {{if !_shipment}}
    <h2>${i18n('text_your_password')}</h2>
    <div class="content">
      <table class="form">
        <tr>
          <td><span class="required">*</span> ${i18n('entry_password')}</td>
          <td><input type="password" name="password" id="password" /></td>
        </tr>
        <tr>
          <td><span class="required">*</span> ${i18n('entry_confirm')}</td>
          <td><input type="password" name="confirm"/></td>
        </tr>
      </table>
    </div>
    <h2>${i18n('text_newsletter')}</h2>
    <div class="content">
      <table class="form">
        <tr>
          <td>${i18n('entry_newsletter')}</td>
          <td>
            <input type="radio" name="newsletter" value="1" checked="true"/>
            ${i18n('text_yes')}
            <input type="radio" name="newsletter" value="0" />
            ${i18n('text_no')}
          </td>
        </tr>
      </table>
    </div>
    {{/if}}
    {{if typeof text_agree != 'undefined'}}
    <div class="buttons">
      <div class="right">${i18n('text_agree')}
        <input type="checkbox" name="agree" value="1"/>
        <a onclick="$('#register${_shipment}').submit();" class="button"><span>${i18n('button_continue')}</span></a></div>
    </div>
    {{else}}
    <div class="buttons">
      <a onclick="$('#register${_shipment}').submit();" class="button"><span>${i18n('button_continue')}</span></a>
    </div>
    {{/if}}
  </form>

<script type="text/javascript">
  /*
  http://www.playframework.org/documentation/1.2.3/validation-builtin#phone

  Format: +CCC (SSSSSS)9999999999xEEEE

    + optional country code mark
    CCC optional country code, up to 3 digits, note than it MUST be followed be a delimiter
    (SSSSSS) optional subzone, up to 6 digits
    9999999999 mandatory number, up to 20 digits (which should cover all know cases current and future)
    x optional extension, can also be spelled “ext” or "extension"
    EEEE optional extension number, up to 4 digits
    Delimiters can be either a space, -, . or / and can be used anywhere in the number

  Examples:

    usa:(305) 613 09 58 ext 101
    france:+33 1 47 37 62 24 x3
    germany:+49-4312 / 777 777
    china:+86 (10)69445464
    uk:(020) 1234 1234
  */
  $.validator.addMethod("phone", function(phone_number, element) {
	return this.optional(element) || phone_number.length > 9 &&
	  /* excerpt from play framework/src/play/data/validation/PhoneCheck.java */
		phone_number.match(/^([\+][0-9]{1,3}([ \.\-]?))?([\(]{1}[0-9]{2,6}[\)])?([0-9 \.\-\/]{3,20})((x|ext|extension)[ ]?[0-9]{1,4})?$/);
  }, "Please specify a valid phone number");

  $("#register${_shipment}").validate({
    rules: {
      'firstname': 'required',
      'lastname': 'required',
      'email': {
        required: true,
        email: true,
        remote: 'index.php?route=account/registerx'
      },
      'telephone': {
          required: true,
          phone: true
      },
      'fax': 'phone',
      'address_1': 'required',
      'city': 'required',
      'postcode': 'required',
      'country': 'required',
      'zone': 'required',
      'password': {
          required: true,
          minlength: 4
      },
      'confirm': {
          required: true,
          equalTo: '#password'
      }
    },
    messages: {
      'firstname': i18n('error_firstname'),
      'lastname': i18n('error_lastname'),
      'email': {
          required: i18n('error_email'),
          email: i18n('error_email'),
          remote: i18n('error_exists')

      },
      'telephone': i18n('error_telephone'),
      'fax': i18n('error_fax'),
      'address_1': i18n('error_address_1'),
      'city': i18n('error_city'),
      'postcode': i18n('error_postcode'),
      'country': i18n('error_country'),
      'zone': i18n('error_zone'),
      'password': i18n('error_password'),
      'confirm': i18n('error_confirm')
    },
    {{if typeof _action != 'undefined'}}
    /* workaround dialog + sammy problem */
    submitHandler: function(form) {
      var returned = app._checkFormSubmission($(form));
    },
    {{/if}}
    onkeyup: false
  });

  $("#city").autocomplete({
      source: function( request, response ) {
          $.getJSON("http://ws.geonames.org/searchJSON?name_startsWith=" + request.term + "&featureClass=P&maxRows=12&stye=full&lang=ru", function( data ) {
              response( $.map( data.geonames, function( item ) {
                  return {
                      label: item.name + (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryName + ", " + item.countryCode,
                      value: item.name
                  }
              }));
          });
      },
      minLength: 4,
      select: function(event, ui) {
          if (ui.item) {
            var selected = ui.item.label.split(",");
            if (selected.length == 4) {
              $('#zone').val(selected[1].trim());
              $('#country').val(selected[2].trim());
              $('#country_code').val(selected[3].trim())
            } else {
              $('#zone').val(ui.item.value);
              $('#country').val(selected[1].trim());
              $('#country_code').val(selected[2].trim())
            }
            return false;
          }
      }
  });

</script>
